const path = require("path")
const { whenProd, getPlugin, pluginByName } = require("@craco/craco")

module.exports = {
  // webpack配置
  webpack: {
    // 配置路径别名
    alias: {
      // 约定：使用 @ 表示 src 所在的路径
      "@": path.resolve(__dirname, "src")
    },
    // 配置CDN
    configure: webpackConfig => {
      let cdn = {
        js: [],
        css: []
      }
      // 只有生产环境才使用CDN资源
      whenProd(() => {
        // key => 不需要参与打包的具体的包
        // value => 挂载于全局的变量名称，代码中用到（例如：import React from "react"）
        webpackConfig.externals = {
          react: "React",
          "react-dom": "ReactDOM"
        }
        // 配置现成的CDN资源（实际开发的时候用公司自己的CDN服务器）
        // 注意，配置的CDN资源版本要和开发环境的包版本一致，避免出现兼容性问题
        cdn = {
          js: [
            "https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"
          ],
          css: []
        }
      })

      // 配置 htmlWebpackPlugin 插件，为了将来在 public/index.html 注入
      const { isFound, match } = getPlugin(webpackConfig, pluginByName("HtmlWebpackPlugin"))
      if (isFound) {
        // 找到了HtmlWebpackPlugin的插件
        match.userOptions.cdn = cdn
      }
      return webpackConfig
    }
  }
}
